<template>
        <h4>computed计算属性</h4>
        <hr>
        <div>num:{{num}}</div>
        <div>函数形式:{{num2}}</div>
        <button @click="changenum">change1</button>
        <hr>
        <div>string: {{string}}</div>
        <div>对象形式：{{str}}</div>
        <button @click="changestr">change2</button>
</template>
    
<script setup lang='ts'>
    // 计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import { Ref } from "vue";

    // 函数形式
    let num = ref<number>(0);
    let num2 = computed<string>(()=> {
        return num.value + '!'
    });
    let changenum = function() {
        num.value ++;
        console.log('changenum:', num2);
    };


    // 对象形式
    let string: Ref<string> = ref('hello');
    let str = computed({
        get: () => {
            console.log('get');
            return string.value;
        },
        set: () => {
            console.log('set');
            string.value += '?';
        }
    });
    let changestr = function() {
        // string.value += '@';
        str.value = '@@@@@@';
        console.log('changestr:', str);
    }
</script>
    
<style>
    
</style>